<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>迁移图</title>
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="proj4,mapv" src="./static/libs/include-openlayers-local.js"></script>
    <style>
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = new ol.Map({
            //地图容器div的ID
            target: 'map',
            //地图容器中加载的图层
            layers: [],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点
                center: ol.proj.fromLonLat([116, 30]),
                //地图初始显示级别
                zoom: 4,
                //最小级别
                minZoom: 1,
                //最大级别
                maxZoom: 12
            })
        });

        map.addLayer(new ol.layer.Tile({
            source: new ol.source.TileImage({
                url: 'https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=' +
                    'sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw'
            })
        }))

        var data = [];
        var timeData = [];

        function curive(fromPoint, endPoint, n) {
            var delLng = (endPoint.lng - fromPoint.lng) / n;
            var delLat = (endPoint.lat - fromPoint.lat) / n;

            for (var i = 0; i < n; i++) {
                var pointNLng = fromPoint.lng + delLng * i;
                var pointNLat = fromPoint.lat + delLat * i;
                timeData.push({
                    geometry: {
                        type: 'Point',
                        coordinates: [pointNLng, pointNLat]
                    },
                    count: 1,
                    time: i
                });
            }
        }

        // 构造数据
        $.ajax({
            url: '../../static/data/mapv/qianxi-time',
            success: function(rs) {
                var items = rs.split('|');
                for (var i = 0; i < items.length; i++) {
                    var itemArr = items[i].split(/\n/);
                    for (var k = 0; k < itemArr.length; k++) {
                        if (!!itemArr[k]) {
                            var item = itemArr[k].split(/\t/);
                            if (item[0] === '起点城市' || item[0] === '迁出城市') {
                                var cityBegin = item[1];
                            }
                            if (item[0] !== '起点城市' || item[0] !== '迁出城市' && item.length > 1) {
                                var cityCenter1 = mapv.utilCityCenter.getCenterByCityName(item[0].replace(/市|省/, ""));
                                var cityCenter2 = mapv.utilCityCenter.getCenterByCityName(cityBegin.replace(/市|省/, "").trim());
                                if (cityCenter1) {
                                    if (Math.random() > 0.7) {
                                        curive(cityCenter2, cityCenter1, 50);
                                    }
                                    data.push({
                                        geometry: {
                                            type: 'LineString',
                                            coordinates: [
                                                ol.proj.transform(
                                                    [cityCenter1.lng - 1 + Math.random() * 1,
                                                        cityCenter1.lat - 1 + Math.random() * 1
                                                    ], 'EPSG:4326', 'EPSG:3857'),

                                                ol.proj.transform([
                                                    cityCenter2.lng - 1 + Math.random() * 1,
                                                    cityCenter2.lat - 1 + Math.random() * 1
                                                ], 'EPSG:4326', 'EPSG:3857')
                                            ]
                                        },
                                        count: 100 * Math.random()
                                    });
                                }
                            }
                        }
                    }
                }

                var dataSet = new mapv.DataSet(data);
                var options = {
                    strokeStyle: 'rgba(55, 50, 250, 0.3)',
                    globalCompositeOperation: 'lighter',
                    shadowColor: 'rgba(55, 50, 250, 0.5)',
                    methods: {
                        click: function(item) {}
                    },
                    gradient: {
                        0: 'rgba(55, 50, 250, 0)',
                        1: 'rgba(55, 50, 250, 1)'
                    },
                    lineWidth: .2,
                    draw: 'intensity'
                };

                map.addLayer(
                    new ol.layer.Image({
                        source: new ol.source.Mapv({
                            map: map,
                            dataSet: dataSet,
                            mapVOptions: options
                        })
                    })
                );

                var dataSet = new mapv.DataSet(timeData);
                var options = {
                    fillStyle: 'rgba(255, 250, 250, 0.9)',
                    size: 1.5,
                    animation: {
                        type: 'time',
                        stepsRange: {
                            start: 0,
                            end: 50
                        },
                        trails: 1,
                        duration: 5,
                    },
                    draw: 'simple'
                };
                let mapvlayer = new ol.source.Mapv({
                    map: map,
                    dataSet: dataSet,
                    mapVOptions: options
                })

                /*         map.addLayer(
                          new ol.layer.Image({
                            source: mapvlayer
                          }));

                        console.log('mapvlayer', mapvlayer)

                        var newoptions = {
                          fillStyle: 'rgba(0, 250, 250, 0.9)',
                          size: .5,
                          animation: {
                            type: 'time',
                            stepsRange: {
                              start: 0,
                              end: 50
                            },
                            trails: 1,
                            duration: 5,
                          },
                          draw: 'simple'
                        };
                        mapvlayer.updateData(dataSet, newoptions); */
            }
        });
    </script>


</body>

</html>